<template>
  <div class="section-page">
    <h3 class="section-title" style="text-decoration:none;">
      <span @click="backHandle" style="cursor: pointer;text-decoration:underline;">进度管理详情</span>
      <span>>>设备齐套管理</span>
    </h3>
    <div class="section-header mt10">
      <el-button-group class="button-group">
        <template v-for="(item, index) of treeList">
          <el-button
            v-if="item.sysName"
            :key="index"
            type="default"
            :class="
              tabActive === item.sysCode ? 'btn-c-primary' : 'btn-c-default'
            "
            @click="clickDevice(item)"
            >{{ item.sysName }}</el-button
          >
        </template>
      </el-button-group>
      <el-form class="modify-form flex-center" inline>
        <el-form-item style="margin-bottom:0;padding-top: 2px;">
          <el-input
            class="modify-el-input"
            style="width: 150px;"
            v-model="searchData.deviceCode"
            @keyup.enter.native="searchHandle"
            clearable
            placeholder="单机代号"
          />
        </el-form-item>
        <el-button
          class="btn-add-primary"
          icon="el-icon-search"
          @click="searchHandle"
        ></el-button>
      </el-form>
    </div>

    <div class="mt10">
      <el-tabs v-model="activeName" @tab-click="handleClick" v-if="!leaf">
        <template v-for="(item, index) of subTreeList">
          <el-tab-pane
            :key="index"
            :label="item.sysName || '未识别系统'"
            :name="item.sysCode"
          >
          </el-tab-pane>
        </template>
      </el-tabs>
      <template>
        <c-table
          is-selection
          :loading="loading"
          :table-column="tableColumn"
          :table-data="tableData"
          :is-delete="false"
          @on-save="onSave"
          @focus="focusHandle"
          @deviceCode="detailHandle"
        />
        <div style="padding: 10px;text-align: center;">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="pageOption.pageSize"
            :total="pageOption.total"
            :page-sizes="pageOption.sizes"
            @size-change="sizeCurrentChange"
            @current-change="pageCurrentChange"
          >
          </el-pagination>
        </div>
      </template>
    </div>
    <device-detail-dialog
      v-if="detailData"
      :detail-data="detailData"
      @close="detailData = null"
    />
  </div>
</template>

<script>
import { overviewApis } from '@/apis'
import { treeCoulmn } from './data'
import DeviceDetailDialog from './DeviceDetailDialog.vue'

export default {
  components: { DeviceDetailDialog },
  props: ['id'],
  data() {
    return {
      activeName: '',
      tabActive: 1,
      treeList: [],
      subTreeList: [],
      loading: false,
      tableColumn: treeCoulmn,
      tableData: [],
      detailData: null,
      leaf: false,
      searchData: {
        deviceCode: '',
      },
      pageOption: {
        page: 1,
        pageSize: 10,
        total: 0,
        sizes: [5, 10, 20, 30, 40, 50, 100],
      },
    }
  },
  mounted() {
    this.sysList()
  },
  methods: {
    //子系统切换
    handleClick(tab) {
      this.sysSubCode = tab.name
      this.progressSysinfoFindPageList(tab.name)
    },
    searchHandle() {
      this.pageOption.page = 1
      this.progressSysinfoFindPageList(this.querySysSubCode)
    },
    sizeCurrentChange(size) {
      this.pageOption.pageSize = size
      this.progressSysinfoFindPageList(this.querySysSubCode)
    },
    pageCurrentChange(page) {
      this.pageOption.page = page
      this.progressSysinfoFindPageList(this.querySysSubCode)
    },
    async progressSysinfoFindPageList(sysSubCode) {
      const { page, pageSize } = this.pageOption
      this.querySysSubCode = sysSubCode
      this.loading = true
      const { data } = await overviewApis.progressSysinfoFindPageList({
        ...this.params,
        ...this.searchData,
        sysSubCode,
        pageNum: page,
        pageSize,
      })
      const { list, total } = data
      this.tableData = list.map((item) => {
        return {
          ...item,
          edit: false,
        }
      })
      this.pageOption.total = total
      this.loading = false
    },
    async sysList() {
      const { data } = await overviewApis.sysList({ modelId: this.id })
      this.treeList = data
      this.params = {
        modelId: this.id,
        sysCode: data[0].sysCode || '',
      }
      this.tabActive = data[0]?.sysCode || ''
      this.subTreeList = data[0]?.subList ?? []
      this.activeName = this.subTreeList[0]?.sysCode || ''
      this.progressSysinfoFindPageList(this.activeName)
    },
    async onSave(row) {
      const params = {
        id: row.id,
        orderTestNum: row.orderTestNum,
        orderNum: row.orderNum,
        arrivalTestNum: row.arrivalTestNum,
        arrivalNum: row.arrivalNum,
        manufacturer: row.manufacturer,
        telphone: row.telphone,
        focus: row.focus,
      }
      await overviewApis.progressSysinfoSave(params)
      row.edit = false
    },
    async focusHandle(row) {
      await overviewApis.progressSysinfoFocus({ id: row.id })
      this.progressSysinfoFindPageList(this.querySysSubCode)
      this.$emit('refresh-sub')
    },
    detailHandle(row) {
      this.detailData = row
    },
    clickDevice(item) {
      this.tabActive = item.sysCode
      this.params = {
        modelId: this.id,
        sysCode: item.sysCode || '',
      }
      this.leaf = item.leaf
      if (!item.leaf) {
        this.subTreeList = item?.subList ?? []
        this.activeName = this.subTreeList[0]?.sysCode || ''
        this.progressSysinfoFindPageList(this.activeName)
      } else {
        this.progressSysinfoFindPageList()
      }
    },
    backHandle() {
      this.$emit('back', 0, 'device')
    },
  },
}
</script>

<style lang="scss" scoped></style>
